.monaco-editor {
    .code-text-error {
        text-decoration: wavy underline red;
    }

    .monaco-inputbox input:active,
    .monaco-inputbox input:focus {
        outline-color: #0d6efd;
        outline-style: solid;
    }

    // Inlay hint styling
    span[class*=" dyn-rule"],
    span[class^="dyn-rule"] {
        color: gray;
        font-size: 80%;
        margin-right: 2px;
        padding: 0 3px;
        border-radius: 4px;
    }

    // Code action popup needs some more width so it doesn't truncate words
    .action-widget {
        min-width: calc(15cqw) !important;
    }

    .rendered-markdown {
        p {
            margin-block-start: 0.8em;
        }

        .mtk1 {
            color: #4ec9b0;
        }
    }

    .monaco-sash.horizontal.hover::before,
    .monaco-sash.horizontal.active::before {
        height: 4px;
    }

    .monaco-sash.vertical.hover::before,
    .monaco-sash.vertical.active::before {
        width: 4px;
    }

    // Make completion suggestion documentation text wrap if it doesn't fit
    .docs.markdown-docs .monaco-tokenized-source {
        white-space: break-spaces !important;
        overflow-wrap: anywhere;
    }

    .codicon.codicon-csharp {
        height: 16px;
        width: 16px;
        background: url("../../../../../wwwroot/img/csharp-logo.png");
        background-size: 16px 16px;
    }

    .codicon.codicon-sql {
        height: 16px;
        width: 16px;
        background: url("../../../../../wwwroot/img/sql-logo.svg");
        background-size: 16px 16px;
    }

    input.rename-input {
        color: var(--text-color);
    }

    .focused-text {
        background: var(--border-contrast-color);
    }
}

.theme-netpad-dark {
    .monaco-editor {
        // Inlay hint styling
        span[class*=" dyn-rule"],
        span[class^="dyn-rule"] {
            background-color: #2d2d2d;
        }
    }
}
